.toasted-container.bottom-right {
    bottom: 32px !important;
    right: 32px !important;
}

.toasted-container.bottom-left {
    bottom: 32px !important;
    left: 32px !important;
}

.toasted-container {
    @apply items-start;
}

.toasted-container .toasted.statamic {
    @apply bg-white dark:bg-dark-900 text-gray-800 dark:text-dark-100 mt-4 text-base rounded shadow p-0;
    height: 48px;

    i {
        @apply flex items-center rtl:rounded-r ltr:rounded-l rtl:ml-4 ltr:mr-4 h-full px-4 text-white;
    }

    &.success i {
        @apply bg-green-400 dark:bg-green-600 text-green-700 dark:text-green-950;
    }

    &.error i {
        @apply bg-red-500 dark:bg-red-600;
    }

    &.default i {
        @apply bg-gray-800 dark:bg-dark-900;
    }

    .action {
        @apply font-normal text-xl px-4 h-full text-gray-600 dark:text-dark-150 m-0 rtl:mr-2 ltr:ml-2 flex items-center;
        &:hover {
            @apply no-underline text-gray-900 dark:text-dark-100;
        }
    }
}
